<template>
    <div class="users">
        <h1>Hello Users</h1>
        <ul>
            <li v-for="user in users" :key="user.id"
                @click="user.show = !user.show">
                <h2>{{user.name}}</h2>
                <h3 v-show="user.show">{{user.position}}</h3>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'users',
    // 使用props接收父组件传过来的值
    // props: ["users"],
    props: {
        users: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            
        }
    }
}
</script>

<!-- scoped:域，CSS只在当前组件生效 -->
<style scoped>
h1 {
  color: green;
}

.users {
    width: 100%;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    box-sizing: border-box;
}

ul {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    padding: 0;
}

li {
    flex-grow: 1;
    flex-basis: 200px;
    text-align: center;
    padding: 30px;
    border: 1px solid #222;
    margin: 10px;
}
</style>
